    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>教练个人中心</title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/vue.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">
    </head>
    <body>
    <div id="outter">
        <a  class="btn" @click="selectmychargeconfirm">我收到的预约请求</a>
        <a  class="btn" @click="selectmyorders">我的签约(申请订单表0(学员看不见)  教练我上完课了1(学员显示待付款) 已经付款3 )</a>
        <a   @click="selectallcourses">所有的课程</a>
        <a   data-toggle='modal'  data-target='#myModal'>订单申请</a>
        <div id="order" style="width: 100%;height: 100%">
            <table  v-if="orders.length!=0" class="table text-center table-bordered table-hover table-striped bg-info">
                <thead>
                <tr>
                    <td >课程名字</td>
                    <td >上课时间</td>
                    <td >学员名字</td>
                    <td >课时长度</td>
                    <td >订单状态</td>
                    <td >我上完课了(要求学员付款)</td>
                </tr>
                </thead>
                <tr   v-for="order in orders" class="tr-data" >
                    <td v-text="order.coursename"></td>
                    <td v-text="order.timedesc"></td>
                    <td v-text="order.name"></td>
                    <td v-text="order.curselength"></td>
                    <td v-text="order.status"></td>
                    <td ><a   @click="pleasepay(order.ordersId)">我上完课了(邀请学员付款)</a></td>
                </tr>
            </table>


            <table  v-if="allcourses.length!=0" class="table text-center table-bordered table-hover table-striped bg-info">
                <thead>
                <tr>
                    <td >课程名字</td>
                    <td >是否拥有0未拥有1是拥有)</td>
                    <td >添加课程</td>
                </tr>
                </thead>
                <tr   v-for="course in allcourses" class="tr-data" >
                    <td v-text="course.courseName"></td>
                    <td v-text="course.ishave"></td>
                    <td ><a @click="addtomycourse(course.courseId)">添加到我的课程</a></td>
                </tr>
            </table>








            <table  v-if="chargeconfirms.length!=0" class="table text-center table-bordered table-hover table-striped bg-info">
                <thead>
                <tr>
                    <td >学员id</td>
                    <td >教练id</td>
                    <td >状态(0未确认 ,1是确认 2是拒绝 3是过期)</td>
                    <td >操作</td>
                </tr>
                </thead>
                <tr   v-for="chargeconfirm in chargeconfirms" class="tr-data" >
                    <td v-text="chargeconfirm.studentId"></td>
                    <td v-text="chargeconfirm.coachId"></td>
                    <td v-text="chargeconfirm.status"></td>
                    <td >

                  <a  @click="ispass(chargeconfirm.studentId,chargeconfirm.coachId,1)">同意</a>
                 <a  @click="ispass(chargeconfirm.studentId,chargeconfirm.coachId,0)" >拒绝</a>
                    </td>

                </tr>
            </table>




        </div>
        <!-- 模态框（Modal） -->
        <div   v-if="freetime.length!=0 && courses.length!=0 &&students.length!=0" class="modal fade " id="myModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            春天的风 带来夏天的雨
                        </h4>
                    </div>
                    <div class="modal-body">
                      新增订单
                        <form >
                            <label>选择上课时间:</label>
                            <select   v-model="coachTimeId"  name="coachTimeId">
                                <option v-for="coachTime in freetime" :value="coachTime.coachTimeId">{{coachTime.coachtimedesc}}</option>
                            </select>
                            <label>选择上课的内容:</label>
                            <select v-model="courseId"  name="courseId">
                                <option v-for="courses in courses" :value="courses.courseId">{{courses.courseName}}</option>
                            </select>
                            <label>选择学员:</label>
                            <select v-model="studentId"  name="studentId">
                                <option v-for="student in students" :value="student.studentId">{{student.name}}</option>
                            </select>
                             <input type="number"  v-model="courseLength" name="courseLength">
                             <input type="hidden"  v-model="status" name="status">

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="askfororder" data-dismiss="modal">确认
                        </button>
                        <button type="button"   data-dismiss="modal"        class="btn btn-primary ">
                            取消
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
    <script type="text/javascript">
    //全局变量
        var _this;
    var strurl=location.href;
    var coachId=strurl.split("=")[1];
    var zullstr="http://192.168.10.58:11000/user-coach/"
        var app=new Vue({
            el:"#outter",
            data:{
                orders:[],
                freetime:[],
                coachTimeId:"",
                courses:[],
                courseId:"",
                coachId:"",
                students:[],
                studentId:"",
                courseLength:"",
                status:"0",
                chargeconfirms:[],
                allcourses:[],
            },
            created:function(){
                _this=this;
                _this.selectfreetime();
                _this.selectcourse();
                _this.selectmystudents();
            },
            methods:{
             selectmyorders:function () {
                 $.ajax({

                     beforeSend: function (request) {
                         request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                     url:zullstr+"orders/selectordersbycoachid",
                     type:"post",
                     data:{"coachId":_this.coachId},
                     success:function(data){
                         _this.orders=data.data;

                     }
                 });
             },


             selectallcourses:function(){
                 $.ajax({
                     beforeSend: function (request) {
                         request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                     url:zullstr+"course/allcourses",
                     type:"post",
                     data:{"coachId":_this.coachId},
                     success:function(data){
                         _this.allcourses=data.data;
                     }
                 });


             },




                selectfreetime:function(){
                    $.ajax({
                        beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"appoint/freetime",
                        type:"post",
                        data:{"coachId":_this.coachId},
                        success:function(data){
                            _this.freetime=data;
                        }
                    });
                },
                selectcourse:function(){
                    $.ajax({
                        beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"orders/allcoursebycoachId",
                        type:"post",
                        data:{"coachId":_this.coachId},
                        success:function(data){
                          _this.courses=data.data;
                        }
                    });

                },

                selectmychargeconfirm:function () {
                    $.ajax({
                        beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"appoint/selectmychargeconfirm",
                        type:"post",
                        data:{"coachId":_this.coachId},
                        success:function(data){
                            _this.chargeconfirms=data.data;

                        }
                    });
                },

                ispass:function(studentId,coachId,ispass){
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"appoint/coachapoint",
                        type:"post",
                        data:{"coachId":_this.coachId,"studentId":studentId,"ispass":ispass},
                        success:function(data){
                            _this.students=data.data;
                        }
                    });

                },

                selectmystudents:function(){
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},


                        url:zullstr+"orders/allmystudent",
                        type:"post",
                        data:{"coachId":_this.coachId},
                        success:function(data){
                            _this.students=data.data;
                        }
                    });

                },

                askfororder:function () {
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"orders/askorder",
                        type:"post",
        data:{"coachId":_this.coachId,"studentId":_this.studentId,"courseId":_this.courseId,
            "coachTimeId":_this.coachTimeId,"status":_this.status,"courseLength":_this.courseLength},
                        success:function(data){
                         _this.selectmyorders();
                        }
                    });
                },
              pleasepay:function (ordersId) {
                  $.ajax({ beforeSend: function (request) {
                          request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                      url:zullstr+"orders/pleasepay",
                      type:"post",
                      data:{"ordersId":ordersId},
                      success:function(data){
                         var result=data.data;
                         if (result==1){
                             alert("已发起付款")
                             _this.selectmyorders()
                         }
                      }
                  });
              },

                addtomycourse:function (courseId) {
                    $.ajax({ beforeSend: function (request) {
                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
                        url:zullstr+"course/addtomycourse",
                        type:"post",
                        data:{"coachId":_this. coachId,"courseId":courseId},
                        success:function(data){
                            _this.selectallcourses();
                        }
                    });
                }

            }



        });
    </script>
    </body>
    </html>